{% extends "base.html" %}

{% block title %}项目列表 - 项目管理系统{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header card-header-flex">
    <h5>项目列表</h5>
    <a href="{{ url_for('project_edit') }}" class="btn btn-primary">
      <i class="fas fa-plus"></i> 新建项目
    </a>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th style="width: 60px;">ID</th>
            <th>项目名称</th>
            <th>项目代码</th>
            <th>分类</th>
            <th>状态</th>
            <th>创建人</th>
            <th style="width: 220px;" class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for project in projects %}
          <tr>
            <td>{{ project.id }}</td>
            <td>{{ project.name }}</td>
            <td>{{ project.code }}</td>
            <td>{{ project.category_name }}</td>
            <td>
              <span class="badge badge-{% if project.status_name == '已上线' %}success{% elif project.status_name == '开发中' %}primary{% elif project.status_name == '测试中' %}info{% else %}secondary{% endif %} status-badge">
                {{ project.status_name }}
              </span>
            </td>
            <td>{{ project.creator }}</td>
            <td class="text-center">
              <div class="btn-group" role="group">
                <a href="{{ url_for('project_detail', project_id=project.id) }}" class="btn btn-sm btn-info">
                  <i class="fas fa-info-circle"></i> 详情
                </a>
                <a href="{{ url_for('project_edit', project_id=project.id) }}" class="btn btn-sm btn-warning">
                  <i class="fas fa-edit"></i> 编辑
                </a>
                <form action="{{ url_for('project_delete', project_id=project.id) }}" method="post" style="display: inline-block;">
                  <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash"></i> 删除
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    {% if not projects %}
    <div class="alert alert-info">
      暂无项目数据
    </div>
    {% endif %}
  </div>
</div>

<style>
  /* 确保操作按钮在同一行 */
  .btn-group {
    display: flex;
    justify-content: center;
  }
  
  .btn-group form {
    margin-left: 2px;
  }
  
  .btn-group .btn {
    border-radius: 4px;
  }
  
  /* 确保列表水平排列 */
  ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  li {
    display: inline-block;
    margin-right: 15px;
  }
</style>
{% endblock %} 